<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex1: '1',
				user: {},
				jsonUser: {},
				checked: false,
			}
		},
		async created() {
			this.user = this.$cookies.get('user')
			if (this.user) {
				this.checked = true
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				if (this.user) {
					if (key == 5) {
						this.$router.push({ path: '/mine' })
					}
					if (key == 4) {
						this.$router.push({ path: '/mine/shoppingCart' })
					}
					if (keyPath[0] == 3) {
						if (key == '2-2') {
						} else {
							this.$router.push({ path: '/mine/orders' })
						}
					}
				} else {
					this.$message.warning('请登录账号')
				}
			},
		},
	}
</script>
<template>
	<div class="head">
		<el-menu
			:default-active="activeIndex"
			class="el-menu-demo"
			mode="horizontal"
			v-if="!checked"
			@select="handleSelect"
		>
			<el-menu-item index="1"
				><router-link to="/login">亲，请登录</router-link></el-menu-item
			>
			<el-menu-item index="2"
				><router-link to="/sign">免费注册</router-link></el-menu-item
			>
		</el-menu>
		<el-menu
			:default-active="activeIndex"
			class="el-menu-demo phone"
			mode="horizontal"
			v-else
			@select="handleSelect"
		>
			<span v-if="user.userName"> {{ user.userName }} </span>
			<span v-else> {{ user.phone }}</span>
		</el-menu>
		<div class="line"></div>
		<el-menu
			:default-active="activeIndex1"
			class="el-menu-demo1"
			mode="horizontal"
			@select="handleSelect"
		>
			<el-submenu index="3">
				<template slot="title"><a href="#">我的淘宝</a></template>
				<el-menu-item index="2-1">已买到的宝贝</el-menu-item>
				<el-menu-item index="2-2">我的收藏</el-menu-item>
			</el-submenu>
			<el-menu-item index="4"
				><a href="#">
					<div class="demo-type">
						<div class="shopping-cart">
							<img src="@/assets/shoppingCart.png" alt="" srcset="" />
							<span>购物车</span>
						</div>
					</div>
				</a></el-menu-item
			>
			<el-menu-item index="5" @select="handleSelect"
				><router-link to="#">我的</router-link></el-menu-item
			>
		</el-menu>
	</div>
</template>
<style scoped>
	a {
		color: #000;
		font-weight: bold;
		text-decoration: none;
	}
	.head {
		background: #f5f5f5;
	}
	.phone {
		padding: 20px 0 20px 20px;
	}

	.el-menu-demo1 {
		float: right;
		margin-top: -61px;
	}
	.shopping-cart img {
		border-radius: 50%;
	}
	.shopping-cart span {
		margin-left: 15px;
	}
</style>
